<template>
  <div>
    <PhoneSwiper></PhoneSwiper>
    <div class="news">
      <div class="newstitle">
        <span>新闻</span>
      </div>
      <van-list v-model="loading" :finished="finished">
        <van-cell icon="location-o" v-for="(item,index) in newsList" :key="index" :title="item.title" />
      </van-list>
      <van-cell>
        <div class="more" @click="tomessage">
          <span>查看更多</span>
        </div>
      </van-cell>
    </div>
    <!-- 公告 -->
    <div class="news">
      <div class="newstitle">
        <span>公告</span>
      </div>
      <van-list v-model="loading" :finished="finished">
        <van-cell icon="location-o" v-for="(item,index) in noticeList" :key="index" :title="item.title" />
      </van-list>
      <van-cell>
        <div class="more" @click="tomessage">
          <span>查看更多</span>
        </div>
      </van-cell>
    </div>
    <!-- 服务领域 -->
    <div class="news">
      <div class="newstitle">
        <span>服务领域</span>
      </div>
      <van-list v-model="loading" :finished="finished">
        <van-cell class="ServiceContent" icon="star-o" v-for="(item,index) in Service" :key="index"
          :title="item.introduce" />
      </van-list>
    </div>
    <!-- 专家库 -->
    <div class="news">
      <div class="newstitle">
        <span>专家库</span>
      </div>
      <div class="expert">
        <div class="container" v-for="(item,index) in imgList" :key="index">
          <van-image class="img" fit="cover" :src="item.imgUrl" />
          <div class="imgdesc">
            <div class="name">{{item.name}}<span style="padding-left:15px;color:#909399">{{item.job}}</span></div>
          </div>
        </div>
      </div>
      <van-cell>
        <div class="more" @click="toexpert">
          <span>查看更多</span>
        </div>
      </van-cell>
    </div>
    <!-- 成功案例 -->
    <div class="news">
      <div class="newstitle">
        <span>成功案例</span>
      </div>
      <div class="expert">
        <div class="container" v-for="(item,index) in caseList" :key="index">
          <van-image class="img-case" fit="cover" :src="item.url" />
          <div class="imgdesc-case">
            <div class="name-case">{{item.title}}</div>
          </div>
        </div>
      </div>
      <van-cell>
        <div class="more" @click="tocase">
          <span>查看更多</span>
        </div>
      </van-cell>
    </div>
    <!-- 留言 -->
    <div>
      <div class="newstitle-message">
        <span>给我们留言</span>
      </div>
      <van-form @submit="onSubmit">
        <van-field v-model="username" name="username" label="姓名" placeholder="姓名"
          :rules="[{ required: true, message: '请填写姓名' }]" />
        <van-field v-model="company" name="company" label="公司" placeholder="公司"
          :rules="[{ required: true, message: '请填写公司名称' }]" />
        <van-field v-model="telephone" name="telephone" label="手机" placeholder="手机" :rules="[{ required: true, message: '请填写手机号码' },
          { pattern, message: '请输入正确的手机号' }]" />
        <van-field v-model="content" name="content" label="留言" placeholder="留言"
          :rules="[{ required: true, message: '请填写留言内容' }]" />
        <van-field v-model="userCode" name="userCode" label="验证码" placeholder="验证码"
          :rules="[{ required: true, message: '请填写验证码' }]" />
        <div style="text-align: center;">
          <canvas id="canvas" width="100px" height="50px" @click="changecode"></canvas>
        </div>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
    <!-- 关于我们 -->
    <div class="footer">
      <div class="aboutme">
        <div>
          <span>
            {{aboutTitle}}
          </span>
        </div>
        <div class="content" v-for="(item,index) in aboutContent" :key="index">
          <p>{{item}}</p>
        </div>
      </div>
      <van-divider />
      <div class="last">
        <a href="http://www.beian.miit.gov.cn">
          备案号：苏ICP备20041612号
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import PhoneSwiper from '@/pages/phone/home/components/swiper'
export default {
  name: 'PhoneHome',
  components: {
    PhoneSwiper
  },
  data () {
    return {
      username: '',
      company: '',
      telephone: '',
      content: '',
      userCode: '',
      code: '',
      aboutTitle: '关于我们',
      aboutContent: '',
      pattern: /^1[3|4|5|7|8|9][0-9]{9}$/,
      newsList: [],
      noticeList: [],
      Service: [],
      imgList: [],
      caseList: [],
      loading: false,
      finished: true
    }
  },
  methods: {
    tomessage () {
      this.$router.push('/PhoneNews')
    },
    tocase () {
      this.$router.push('/PhoneCase')
    },
    toexpert () {
      this.$router.push('/PhoneExpert')
    },
    getRanNum () {
      var result = []
      var code = ''
      for (var i = 0; i < 4; i++) {
        var ranNum = Math.ceil(Math.random() * 9) // 生成一个0到25的数字
        // 大写字母'A'的ASCII是65,A~Z的ASCII码就是65 + 0~25;然后调用String.fromCharCode()传入ASCII值返回相应的字符并push进数组里
        // result.push(String.fromCharCode(65 + ranNum))
        code = code + ranNum
        result.push(ranNum)
      }
      this.code = code
      this.useCode()
    },
    useCode () {
      var canvas = document.getElementById('canvas')
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d')
        ctx.font = 'bold italic 20px arial'
        ctx.fillText(this.code, 30, 33)
      }
    },
    changecode () {
      var canvas = document.getElementById('canvas')
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d')
        ctx.clearRect(0, 0, 100, 50)
      }
      this.getRanNum()
    },
    getTime () {
      var date = new Date()
      var seperator1 = '-'
      var seperator2 = ':'
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var strDate = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
        ' ' + date.getHours() + seperator2 + date.getMinutes() +
        seperator2 + date.getSeconds()
      return currentdate
    },
    claearForm () {
      this.userCode = ''
      this.username = ''
      this.company = ''
      this.telephone = ''
    },
    onSubmit (values) {
      if (values.userCode === this.code) {
        var formData = new FormData()
        formData.append('company', this.company)
        formData.append('content', this.content)
        formData.append('name', this.username)
        formData.append('telephone', this.telephone)
        formData.append('updateTime', this.getTime())
        this.$axios({
          method: 'post',
          url: '/words/insert',
          data: formData
        }).then((res) => {
          if (res.data.message === 'SUCCESS') {
            this.$toast.success('留言成功，请保证电话通畅！')
            this.claearForm()
          } else {
            this.$toast('抱歉，出错了，请电话联系我们！')
          }
        })
      } else {
        this.$toast('请输入正确的验证码!')
      }
    },
    getNews () {
      this.$axios({
        method: 'get',
        url: '/news/newNews'
      }).then((res) => {
        this.newsList = res.data.data
      })
    },
    getNotice () {
      this.$axios({
        method: 'get',
        url: '/notice/new'
      }).then((res) => {
        this.noticeList = res.data.data
      })
    },
    getService () {
      this.$axios({
        method: 'get',
        url: '/area/select'
      }).then((res) => {
        this.Service = res.data.data
      })
    },
    getExpert () {
      this.$axios({
        method: 'get',
        url: '/expert/select?page=1&pageSize=4'
      }).then((res) => {
        this.imgList = res.data.data.rows
      })
    },
    getCase () {
      this.$axios({
        method: 'get',
        url: '/success/selectByTime?page=1&pageSize=6'
      }).then((res) => {
        if (res.status === 200) {
          this.caseList = res.data.data.rows
        }
      })
    },
    getData () {
      this.$axios({
        method: 'get',
        url: '/introduction/get'
      }).then((res) => {
        this.aboutTitle = res.data.data.title
        this.aboutContent = res.data.data.content.split('<span>')
      })
    }
  },
  mounted () {
    this.getNews()
    this.getNotice()
    this.getService()
    this.getExpert()
    this.getRanNum()
    this.getData()
    this.getCase()
  }
}
</script>

<style scoped>
.news {
  margin: 15px 15px;
  background: white;
  border-radius: 5px;
  overflow: hidden;
}
.newstitle {
  line-height: 20px;
  margin-top: 5px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
}
.newstitle-message {
  line-height: 20px;
  margin-top: 5px;
  margin-bottom: 10px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
}
ul {
  margin: 5px 10px;
}
.more {
  text-align: center;
}
.expert {
  display: flex;
  justify-content: space-around;
}
.img {
  width: 150px;
  height: 225px;
  border-radius: 2px;
  display: block;
}
.img-case {
  width: 120px;
  height: 120px;
  border-radius: 2px;
  display: block;
}
.imgdesc {
  display: inline-block;
  width: 150px;
  height: 40px;
  background: #eeeeee;
  overflow: hidden;
  box-shadow: 0 2px 10px 0 rgba(31, 56, 88, 0.15);
}
.imgdesc-case {
  display: inline-block;
  width: 120px;
  height: 40px;
  overflow: hidden;
  box-shadow: 0 2px 10px 0 rgba(31, 56, 88, 0.15);
}
.name {
  font-size: 15px;
  line-height: 20px;
  padding: 10px 10px;
}
.name-case {
  font-size: 15px;
  line-height: 20px;
  padding: 10px 10px;
  width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container {
  margin: 5px 0;
}
canvas {
  box-shadow: 0 0 10px 0 #eeeeee;
  margin: 5px 0 0 0;
  background: white;
}
.footer {
  text-align: center;
  background: #364a62;
  margin-bottom: 60px;
  overflow: hidden;
}
.aboutme {
  margin-top: 10px;
  color: white;
  font-weight: 600;
}
.content {
  margin-top: 10px;
  text-align: center;
  font-weight: normal;
}
.last {
  height: 20px;
  line-height: 20px;
  color: white;
  margin-bottom: 16px;
}
a {
  text-decoration: none;
  color: white;
}
</style>
